<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<block v-if="data.binding">
            <view class="binding_pic">
                <image :src="data.__wxapp_img.dapp.binding_pic.url" style="height:100%;width:288upx;"></image>
            </view>
            <view class="binding_num">
                <view clsss="fs-b" style="display: flex;justify-content: center;margin-bottom:16upx;">已绑定手机</view>
                <view class="fs-b" style="display: flex;justify-content: center;">{{data.binding_num}}</view>
            </view>
            <button @tap="renewal" class="binding-footer">更换绑定</button>
        </block>
        <block v-else>
            <view class="binding-header ">
                <view class="empower" style="float:left;">
                    <text @tap="gainPhone" :class="['binding-phone',data.gainPhone?'gainPhone':'']">点击授权</text>
                </view>
                <view class="empower" style="float:right;" v-if="data.status">
                    <text @tap="handPhone" :class="['binding-phone',data.handPhone?'handPhone':'']">手动授权</text>
                </view>
            </view>
            <view style="height:8upx;background:#f7f7f7;"></view>
            <view class="binding-main flex-row" v-if="data.gainPhone">
                <view class="flex-grow-1">
                    <input @input="PhoneInput" :class="['fs-b binding-btn',data.PhoneNumber?'active':'']" disabled="true" maxlength="11" name="phone" placeholder="授权手机号" type="number" :value="data.PhoneNumber"></input>
                </view>
                <view class="glex-grow-0">
                    <button bindgetphonenumber="getPhoneNumber" class="fs-b binding-btn" hoverClass="none" openType="getPhoneNumber" style="color:#ff4544;border-left:1upx solid #e2e2e2;padding-left:50upx;white-space:nowrap">点击授权</button>
                </view>
            </view>
            <block v-if="data.status">
                <view class="binding-main2" v-if="data.handPhone">
                    <view style="height:100upx;border-bottom:1upx solid #e2e2e2;">
                        <input @input="HandPhoneInput" :class="['fs-b binding-btn',data.PhoneNumber?'active':'']" name="phone" placeholder="输入手机号" style="float:left;hieght:100upx;" type="number"></input>
                    </view>
                    <view class="flex-row" style="height:100upx;">
                        <view class="flex-grow-1">
                            <input @input="CodeInput" :class="['fs-b binding-btn',data.PhoneNumber?'active':'']" maxlength="6" name="code" placeholder="输入验证码" type="number"></input>
                        </view>
                        <view class="flex-grow-1">
                            <view class="fs-b binding-btn" style="color:#ff4544;border-left:1upx solid #e2e2e2;padding-left:50upx;" v-if="timer">{{data.second}} S</view>
                            <view @tap="nextStep" class="fs-b binding-btn" style="color:#ff4544;border-left:1upx solid #e2e2e2;padding-left:50upx;white-space:nowrap" v-else>获取验证码</view>
                        </view>
                    </view>
                </view>
            </block>
            <button @tap="onSubmit" class="binding-footer" v-if="data.handPhone">确认</button>
        </block>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
						second: 60
				}
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this;
        myVue.getApp.request({
            url: myVue.getApp.api.user.sms_setting,
            method: "get",
            data: {
                page: 1
            },
            success: function(t) {
                e.setData({
                    status: 0 == t.code
                });
            }
        });
    },
		onShow: function() {
        myVue.getApp.page.onShow(this);
        var t = this, e = t.data.__user_info;
        e && e.binding ? t.setData({
            binding_num: e.binding,
            binding: !0
        }) : t.setData({
            gainPhone: !0,
            handPhone: !1
        });
    },
		methods:{
			gainPhone: function() {
        this.setData({
            gainPhone: !0,
            handPhone: !1
        });
    },
    handPhone: function() {
        this.setData({
            gainPhone: !1,
            handPhone: !0
        });
    },
    nextStep: function() {
        var t = this, e = this.data.handphone;
        e && 11 == e.length ? myVue.getApp.request({
            url: myVue.getApp.api.user.user_hand_binding,
            method: "POST",
            data: {
                content: e
            },
            success: function(e) {
                0 == e.code ? (t.timer(), t.setData({
                    content: e.msg,
                    timer: !0
                })) : (e.code, t.getApp.core.showToast({
                    title: e.msg
                }));
            }
        }) : myVue.getApp.core.showToast({
            title: "手机号码错误"
        });
    },
    timer: function() {
        var t = this;
        new Promise(function(e, n) {
            var a = setInterval(function() {
                t.setData({
                    second: t.data.second - 1
                }), t.data.second <= 0 && (t.setData({
                    timer: !1
                }), e(a));
            }, 1e3);
        }).then(function(t) {
            clearInterval(t);
        });
    },
    HandPhoneInput: function(t) {
        this.setData({
            handphone: t.detail.value
        });
    },
    CodeInput: function(t) {
        this.setData({
            code: t.detail.value
        });
    },
    PhoneInput: function(t) {
        this.setData({
            phoneNum: t.detail.value
        });
    },
    onSubmit: function() {
        var t = this, e = t.data.gainPhone, n = t.data.handPhone, a = e ? 1 : n ? 2 : 0;
        if (e) {
            var o = t.data.phoneNum;
            if (o) {
                if (11 != o.length) return void myVue.getApp.core.showToast({
                    title: "手机号码错误"
                });
                i = o;
            } else if (!(i = t.data.PhoneNumber)) return void myVue.getApp.core.showToast({
                title: "手机号码错误"
            });
        } else {
            var i = t.data.handphone;
            if (!/^\+?\d[\d -]{8,12}\d/.test(i)) return void myVue.getApp.core.showToast({
                title: "手机号码错误"
            });
            var s = t.data.code;
            if (!s) return void myVue.getApp.core.showToast({
                title: "请输入验证码"
            });
        }
        myVue.getApp.request({
            url: myVue.getApp.api.user.user_empower,
            method: "POST",
            data: {
                phone: i,
                phone_code: s,
                bind_type: a
            },
            success: function(e) {
                0 == e.code ? t.setData({
                    binding: !0,
                    binding_num: i
                }) : 1 == e.code && t.getApp.core.showToast({
                    title: e.msg
                });
            }
        });
    },
    renewal: function() {
        this.setData({
            binding: !1,
            gainPhone: !0,
            handPhone: !1
        });
    },
		}
	}
</script>

<style scoped>
.binding-header {
    height: 88upx;
    background: #ffffff;
}

.empower {
    color: #353535;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.binding-phone {
    height: 100%;
    width: 38%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.binding-main {
    height: 100upx;
    background: #ffffff;
    margin-bottom: 80upx;
}

.binding-main2 {
    height: 200upx;
    background: #ffffff;
    margin-bottom: 80upx;
}

.binding-btn {
    height: 56upx;
    margin: 20upx 40upx 0upx 40upx;
    border-radius: 0upx;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

button[class="binding-btn"]::after {
    border: 0;
}

.input-placeholder {
    color: #c9c9c9;
}

.binding-btn.active {
    color: #353535;
}

.binding-footer {
    height: 88upx;
    background: #ff4544;
    border-radius: 44upx;
    margin: 0upx 24upx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 15px;
}

.binding-phone.gainPhone {
    border-bottom: 4upx solid #ff4544;
}

.binding-phone.handPhone {
    border-bottom: 4upx solid #ff4544;
}

.binding_pic {
    height: 288upx;
    margin: 64upx 0upx 56upx 0upx;
    display: flex;
    justify-content: center;
}

.binding_num {
    margin-bottom: 64upx;
}
</style>
